<template>
  <div class="layout-padding row justify-center">
    <div style="width: 600px; max-width: 100vw;">
      <q-list link>
          <!-- 卖家店铺 -->
          <q-item link>
              <q-checkbox v-model="checked_one" color="secondary"/> 
              <q-item-tile label lines="1">金三角贸易区</q-item-tile>  
              <q-item-side right icon="keyboard_arrow_right" />
          </q-item>
         <div v-for="item in gooItems" :key="item.id">
          <q-item @click="toItemDetail(item.id)" link>
            <q-checkbox v-model="checked_one" color="secondary" />
            <q-item-side :image="item.attashments[0]" />
            <q-item-main>
              <q-item-tile label lines="2">{{item.name}}</q-item-tile>
              <q-item-tile sublabel lines="1">
                  <span style="color:red;font-size: 1.2rem">
                      ￥{{item.sellPrice}}
                  </span>
                  <span style="text-decoration: line-through">
                      ￥ {{item.originPrice}}
                  </span>
              </q-item-tile>
              <q-item-tile sublabel lines="1">
                <q-icon name="favorite" />({{item.recommendNo}})
                <q-icon name="visibility" />({{item.pv}})
              </q-item-tile>
            </q-item-main>
          </q-item>
          <q-item-separator />
        </div>
        <q-item-separator />
      </q-list>
      <q-list link>
          <!-- 卖家店铺 -->
          <q-item link>
              <q-checkbox v-model="checked_one" color="secondary"/> 
              <q-item-tile label lines="1">长江三角洲贸易区</q-item-tile>  
              <q-item-side right icon="keyboard_arrow_right" />
          </q-item>
         <div v-for="item in gooItems" :key="item.id">
          <q-item @click="toItemDetail(item.id)" link>
            <q-checkbox v-model="checked_one" color="secondary" />
            <q-item-side :image="item.attashments[0]" />
            <q-item-main>
              <q-item-tile label lines="2">{{item.name}}</q-item-tile>
              <q-item-tile sublabel lines="1">
                  <span style="color:red;font-size: 1.2rem">
                      ￥{{item.sellPrice}}
                  </span>
                  <span style="text-decoration: line-through">
                      ￥ {{item.originPrice}}
                  </span>
              </q-item-tile>
              <q-item-tile sublabel lines="1">
                <q-icon name="favorite" />({{item.recommendNo}})
                <q-icon name="visibility" />({{item.pv}})
              </q-item-tile>
            </q-item-main>
          </q-item>
          <q-item-separator />
        </div>
        <q-item-separator />
      </q-list>

    </div>
  </div>
</template>

<script>
import {
  QList,
  QListHeader,
  QItem,
  QItemSeparator,
  QItemSide,
  QItemMain,
  QItemTile,
  QCheckbox,
  QRadio,
  QToggle,
  QSlider,
  QRange,
  QSelect,
  QIcon
} from "quasar";

export default {
  components: {
    QList,
    QListHeader,
    QItem,
    QItemSeparator,
    QItemSide,
    QItemMain,
    QItemTile,
    QCheckbox,
    QRadio,
    QToggle,
    QSlider,
    QRange,
    QSelect,
    QIcon
  },
  data() {
    return {
      gooItems: [
        {
          id: 2,
          name: "春季特款流行潮流男装",
          attashments: ["statics/quasar.jpg"],
          originPrice: 399,
          sellPrice: 198.99,
          recommendNo: 123,
          pv: 12555
        },
        {
          id: 4,
          name: "冬季羊羔棉保暖南极人床单三件套",
          attashments: ["statics/parallax2.jpg"],
          originPrice: 199,
          sellPrice: 98,
          recommendNo: 1200,
          pv: 16880
        }
      ],
      checked_one: true,
      checked_two: false,
      checked_three: false,
      option: "opt1",
      select: "fb",
      multipleSelect: ["goog", "twtr"],
      selectOptions: [
        {
          label: "Google",
          value: "goog"
        },
        {
          label: "Facebook",
          value: "fb"
        },
        {
          label: "Twitter",
          value: "twtr"
        },
        {
          label: "Apple Inc.",
          value: "appl"
        },
        {
          label: "Oracle",
          value: "ora"
        }
      ],
      range: 20,
      doubleRange: {
        min: 10,
        max: 35
      }
    };
  },
  methods: {
    toItemDetail(itemId) {
      console.log("查看商品详情:", itemId);
      this.$router.push("/mall/goo-detail");
    }
  }
};
</script>
